<template>
<div style="margin-top: 20px;
            margin-left: 20px;
            margin-right: 20px;">

        <el-row :gutter="20" class="mgb20">
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{padding: '0px'}" style="height:100px;">
                    <div class = "datapick">

                    <el-date-picker
                    v-model="time"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                    </div>

                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-1">
                        <i class="el-icon-lx-people grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num">10</div>
                            <div>项目总数</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-2">
                        <i class="el-icon-lx-notice grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num">8</div>
                            <div>正在进行</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-3">
                        <i class="el-icon-lx-goods grid-con-icon"></i>
                        <div class="grid-cont-right">
                            <div class="grid-num">1</div>
                            <div>已完成</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
  <el-row :gutter="20" >
    <el-col :span="12">
        <el-card shadow="hover" >
            <div id="myChart1" style="width:100%;height:400px;"></div>
        </el-card>
    </el-col>
    
    <el-col :span="12">
        <el-card shadow="hover" >
            <div id="myChart2" style="width:100%;height:400px;"></div>
        </el-card>
    </el-col>
  </el-row>  
  <el-row :gutter="20" >
    <el-col :span="12">
        <el-card shadow="hover" >
            <div id="myChart3" style="width:100%;height:400px;"></div>
        </el-card>
    </el-col>
    
    <el-col :span="12">
        <el-card shadow="hover" >
            <div id="myChart4" style="width:100%;height:400px;"></div>
        </el-card>
    </el-col>
  </el-row>  


</div>
</template>
<script>
require('echarts/theme/dark')
export default{
    
    data () {
      return {
        time:'',
        datalist:{},
        orgOptions1: {},
        orgOptions2: {},
        orgOptions3: {},
        orgOptions4: {
            color: ['#3398DB'],
            title:{
            text:'设备使用次数排行'  
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : [],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    max:'1000'
                }
            ],
            series : [
                {
                    name:'次数',
                    type:'bar',
                    barWidth: '60%',
                    data:[],
                }
            ]
        },
      }
  },
  mounted(){
      this.orgOptions = { 
        title:{
            text:"项目完成率"
        },
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                saveAsImage : {show: true}
            }
        },
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                data: [{value: 96, name: '完成率'}]
            }
        ]    
    },

    this.orgOptions4 = { 
        title: {
            text: '项目比率'
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                saveAsImage : {show: true}
            }
        },
        tooltip: {},
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
            }
            },
            indicator: [
            { name: '完成率', max: 100},
            { name: '结题率', max: 100},
            { name: '活动率', max: 100},
            { name: '人员比率', max: 100},
            { name: '效益比）', max: 100},
            ]
        },
        series: [{
            type: 'radar',
            // areaStyle: {normal: {}},
            data : [
                {
                    value : [96, 100, 86, 93, 96],
                }
            ]
        }]
    },
    this.orgOptions2 = {
      title : {
          text: '近几日项目详情',
      },
      tooltip : {
          trigger: 'axis'
      },
      legend: {
          data:['活动率','增长率']
      },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            saveAsImage : {show: true}
        }
    },
      calculable : true,
      xAxis : [
          {
              type : 'category',
              data : ['1号','2号','3号','4号','5号','6号','7号','8号','9号','10号','11号','12号']
          }
      ],
      yAxis : [
          {
              type : 'value'
          }
      ],
      series : [
          {
              name:'活动率',
              type:'bar',
              data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 87, 66, 32.6, 20.0, 6.4, 3.3],
              markPoint : {
                  data : [
                      {type : 'max', name: '最大值'},
                      {type : 'min', name: '最小值'}
                  ]
              }
          },
          {
              name:'增长率',
              type:'bar',
              data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 77, 88, 48.7, 18.8, 6.0, 2.3],
              markPoint : {
                  data : [
                      {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                      {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                  ]
              }
          }
      ]
    }
    this.orgOptions1 = {
      title : {
          text: '设备详情',
      },
      tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
          x : 'center',
          y : 'bottom',
          data:['使用中','故障','空闲','维修中']
      },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            saveAsImage : {show: true}
        }
    },
      calculable : true,
      series : [
          {
              name:'设备详情',
              type:'pie',
              radius : [20, 150],
              roseType : 'radius',
              label: {
                  normal: {
                      show: true
                  },
                  emphasis: {
                      show: true
                  }
              },
              lableLine: {
                  normal: {
                      show: true
                  },
                  emphasis: {
                      show: true
                  }
              },
              data:[
                  {value:100, name:'使用中'},
                  {value:5, name:'故障'},
                  {value:50, name:'空闲'},
                  {value:25, name:'维修中'}
              ]
          }
      ]
    },
    this.orgOptions3={
        title:{
        text:'项目活动率排行'  
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                saveAsImage : {show: true}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['项目', '项目', '项目', '项目', '项目', '项目', '项目'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                max:'100'
            }
        ],
        series : [
            {
                name:'次数',
                type:'bar',
                barWidth: '60%',
                data:[96, 88, 87, 83, 77, 75, 75]
            }
        ]
    },
    this.getList();






  },



  created(){
    
    this.handleListener();
  },
  activated(){
    this.handleListener();
  },



  methods: {



    getList() {
        let myChart1 = this.$echarts.init(document.getElementById('myChart1'));
        myChart1.setOption(this.orgOptions);
        let myChart2 = this.$echarts.init(document.getElementById('myChart2'));
        myChart2.setOption(this.orgOptions2);
        let myChart3 = this.$echarts.init(document.getElementById('myChart3'));
        myChart3.setOption(this.orgOptions3);
        let myChart4 = this.$echarts.init(document.getElementById('myChart4'));
        myChart4.setOption(this.orgOptions4);
        

    },

    handleListener(){
        // 调用renderChart方法对图表进行重新渲染
        window.addEventListener('resize', this.renderChart)
    },
    handleBus(msg){
        setTimeout(() => {
            this.renderChart()
        }, 30);
    },
    renderChart(){
        let myChart1 = this.$echarts.init(document.getElementById('myChart1'));
        myChart1.resize();
        let myChart2 = this.$echarts.init(document.getElementById('myChart2'));
        myChart2.resize();
        let myChart3 = this.$echarts.init(document.getElementById('myChart3'));
        myChart3.resize();
        let myChart4 = this.$echarts.init(document.getElementById('myChart4'));
        myChart4.resize();
    }
  }
}


</script>
<style scoped>

    .div-tl{
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .el-row {
        margin-bottom: 20px;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(100, 213, 114);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }

    .user-info {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
    }

    .user-avator {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .user-info-cont {
        padding-left: 50px;
        flex: 1;
        font-size: 14px;
        color: #999;
    }

    .user-info-cont div:first-child {
        font-size: 30px;
        color: #222;
    }

    .user-info-list {
        font-size: 14px;
        color: #999;
        line-height: 25px;
    }

    .user-info-list span {
        margin-left: 70px;
    }

    .mgb20 {
        margin-bottom: 20px;
    }

    .todo-item {
        font-size: 14px;
    }

    .todo-item-del {
        text-decoration: line-through;
        color: #999;
    }
    .datapick{
        padding: 30px 0;
        text-align: center;
        border-right: 1px solid #eff2f6;
        flex: 1;
    }


</style>
